<template>
	<div style="display: flex; flex-direction: column">
		<el-upload
			v-model:file-list="fileList"
			:list-type="'text'"
			:limit="prop.limit"
			:disabled="prop.disabled"
			:on-preview="handlePictureCardPreview"
			:on-remove="handleRemove"
			:on-change="change"
			:auto-upload="false"
			:accept="prop.optionalType ? prop.optionalType : optionalType"
			:class="prop.hideUpload ? 'upload' : ''"
		>
			<el-button
				:disabled="prop.disabled"
				type="primary"
				v-show="!prop.hideUpload || fileList.length !== prop.limit"
			>
				<el-icon
					v-if="prop.showIcon"
					class="el-icon--right"
					:size="17"
					style="margin-right: 10px"
				>
					<Upload />
				</el-icon>
				选择文件
			</el-button>
		</el-upload>
		<div v-if="prop.prompt" style="font-size: 12px; color: red">
			{{ prop.prompt }}
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, nextTick, watch } from "vue";
import { convertAccept } from "@/utils";
import { Upload } from "@element-plus/icons-vue";
import { UploadFile, UploadFiles, UploadProps, UploadUserFile } from "element-plus";
import { type PyUploadFileType } from "./type";
import { message } from "../../../popup/message";

const props = withDefaults(
	defineProps<{
		modelValue?: any[];
		configure: PyUploadFileType;
	}>(),
	{
		configure: () => ({
			disabled: false,
		}),
	}
);

const emits = defineEmits(["update:modelValue", "onChange"]);
const prop = ref(props.configure);
const fileList = ref<UploadUserFile[]>([]);

const optionalType = ".pdf,.ppt,.xlsx,.xls,.txt,.zip,.doc,.docx,.rar";
const type = prop.value.optionalType ? prop.value.optionalType : optionalType.split(",");
// 改变时触发
const change = (file: UploadFile, uploadFiles: UploadFiles) => {
	// @ts-ignore
	const convertType = convertAccept(type);
	if (!convertType.includes(file.raw?.type!)) {
		uploadFiles.pop();
		return message.open({
			type: "error",
			message: `文件格式错误,只能上传${type}格式`,
			title: "错误",
		});
	}
	fileList.value.push(file);
	emits("onChange", fileList.value, file);
	prop.value.change && prop.value.change(file);
};

// 预览
const handlePictureCardPreview: UploadProps["onPreview"] = uploadFile => {
	if (uploadFile.url) {
		window.open(uploadFile.url);
	} else if (uploadFile.raw) {
		if (uploadFile.raw.type !== "application/pdf")
			return message.open({
				type: "error",
				message: "非pdf文件不支持预览, 请在本地打开文件查看",
				title: "错误",
			});
		let url: string | null = URL.createObjectURL(uploadFile.raw);
		window.open(url);
		url = null;
	}
};

// 删除文件
const handleRemove: UploadProps["onRemove"] = uploadFile => {
	let index: number;
	fileList.value.forEach((e, k) => {
		if (uploadFile.raw && e.raw && e.raw.uid == uploadFile.raw.uid) {
			index = k;
			nextTick(() => fileList.value.splice(index, 1));
		}
	});
	emits("onChange", fileList.value, uploadFile);
	prop.value.remove && prop.value.remove(uploadFile);
};

watch(
	() => props.modelValue,
	val => {
		if (!val) return;
		if (val instanceof Array) {
			// @ts-ignore
			fileList.value = val.map(item => {
				if (typeof item === "string") return { uid: item, url: item, name: item };
				return item;
			});
		} else if (typeof val === "string") {
			fileList.value = [{ uid: val, url: val, name: val }];
		} else {
			throw new Error(`请传入数组类型数据PyUploadImg:${val}`);
		}
	},
	{ immediate: true }
);
</script>
<style scoped lang="scss">
:deep(.el-upload-list__item .el-icon--close-tip) {
	display: none !important;
}

.upload {
	:deep(.el-upload) {
		position: absolute;
	}
}
</style>
